<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆环旋转动画</title>
	</head>
	<body>
		<style>
			@keyframes neko {
				0% {
					transform: scale(1);
				}

				25% {
					transform: scale(0.9);
				}

				50% {
					transform: scale(0.85);
				}

				75% {
					transform: scale(0.9);
				}

				100% {
					transform: scale(1);
				}
			}

			@keyframes avatar {
				to {
				       transform: rotate(1turn);
				   }
			}
			@keyframes yuanhuan{
				to {
				       transform: rotate(1turn);
				   }
			}
			@keyframes yuanhuan2{
				to {
				       transform: rotate(-1turn);
				   }
			}
			#box {
				position: relative;
				width: 100%;
				height: 100%;
				animation: neko 3s linear infinite;
			}

			.avatar {
				width: 120px;
				height: 100%;
				display: block;
				margin: 0 auto;
				transform-origin: 50% 150px;
				position: absolute;
				left: 0;
				right: 0;
				top: 200px;
			}

			.yuanhuan {
				width: 170px;
				height: 170px;
				border-radius: 50%;
				border: 5px blueviolet dashed;
				margin: auto;
				position: absolute;
				left: 0;
				right: 0;
				top: 260px;
				animation: yuanhuan 3s linear infinite;
			}

			.yuanhuan2 {
				width: 140px;
				height: 140px;
				border-radius: 50%;
				border: 5px pink dashed;
				margin: auto;
				position: absolute;
				left: 0;
				right: 0;
				top: 275px;
				animation: yuanhuan2 5s linear infinite;
			}

			.yuanhuan3 img {
				width: 110px;
				height: 110px;
				border-radius: 50%;
				margin: auto;
				position: absolute;
				left: 0;
				right: 0;
				top: 295px;
			}

			.one,
			.two,
			.three,
			.four,
			.five,
			.six,
			.seven,
			.eight,
			.nine,
			.ten {
				color: red;
				display: block;
				width: 20px;
				height: 30px;
				animation: avatar 3s linear infinite;
			}

			.one {
				background-color: red;
			}

			.two {
				background-color: orange;
			}

			.three {
				background-color: yellow;
			}

			.four {
				background-color: blue;
			}

			.five {
				background-color: yellowgreen;
			}

			.six {
				background-color: green;
			}

			.seven {
				background-color: lightgreen;
			}

			.eight {
				background-color: skyblue;
			}

			.nine {
				background-color: blueviolet;
			}

			.ten {
				background-color: plum;
			}
		</style>

		<div id="box">
			<div class="yuanhuan"></div>
			<div class="yuanhuan2"></div>
			<div class="yuanhuan3">
				<img src="./761e022dbfaeee51bcbaac259c7311b.jpg" />
			</div>
			<div id="avaterbox">
				<div class="avatar" style="transform: rotate(0deg);">
					<span class="one"></span>
				</div>
				<div class="avatar" style="transform: rotate(36deg);">
					<span class="two"></span>
				</div>
				<div class="avatar" style="transform: rotate(72deg);">
					<span class="three"></span>
				</div>
				<div class="avatar" style="transform: rotate(108deg);">
					<span class="four"></span>
				</div>
				<div class="avatar" style="transform: rotate(144deg);">
					<span class="five"></span>
				</div>
				<div class="avatar" style="transform: rotate(180deg);">
					<span class="six"></span>
				</div>
				<div class="avatar" style="transform: rotate(216deg);">
					<span class="seven"></span>
				</div>
				<div class="avatar" style="transform: rotate(252deg);">
					<span class="eight"></span>
				</div>
				<div class="avatar" style="transform: rotate(288deg);">
					<span class="nine"></span>
				</div>
				<div class="avatar" style="transform: rotate(324deg);">
					<span class="ten"></span>
				</div>
			</div>
		</div>
	</body>
</html>